<template>
  <div>
    <div class="order-dropdown-box">
      <span style="margin-right: 4px">时间：</span>
      <el-select
        v-model="selectTimeValue"
        @change="handleTimeZbId"
        style="width: 108px"
      >
        <el-option
          v-for="item in timeList"
          :key="item.zbId"
          :label="item.name"
          :value="item.zbId"
        />
      </el-select>

      <span style="margin: 0 4px 0 24px">状态：</span>
      <el-select
        v-model="selectStatusValue"
        @change="handleStatusId"
        style="width: 108px"
      >
        <el-option
          v-for="item in statusList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="order-table">
      <el-table
        :data="tableData"
        size="large"
        height="100%"
        empty-text="暂无数据"
        v-loading="listLoading"
      >
        <el-table-column
          align="center"
          header-align="center"
          prop="order_id"
          label="订单号"
          min-width="155"
        />
        <el-table-column
          align="center"
          header-align="center"
          prop="title"
          label="商品"
          min-width="120"
        >
          <template v-slot="scope">
            <span style="word-break: break-word">
              {{ scope.row.title }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          label="订单金额"
          min-width="80"
        >
          <template v-slot="scope">
            {{ parseFloat(`${scope.row.pay_price / 100}`) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="pay_price"
          label="下单时间"
          min-width="115"
        >
          <template v-slot="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          label-class-name="order-last-header"
          label="状态"
          min-width="80"
        >
          <template v-slot="scope">
            {{ scope.row.statusText }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      small
      hide-on-single-page
      class="order-pagination"
      :pager-count="5"
      layout="prev, pager, next"
      :page-size="pageSize"
      v-model:current-page="page"
      :total="total"
      @current-change="getList"
    />
  </div>
</template>
<script setup lang="ts" name="OrderTable">
import { defineProps, ref, computed, onActivated } from "vue";
import { useRoute } from "vue-router";
import { orderListApi } from "@/api/order";
import { parseTime } from "@/utils";
const route = useRoute();
const props = defineProps({
  timeList: {
    type: Array,
    default: () => []
  }
});
const timeList = computed<any[]>(() => props.timeList);
const listLoading = ref(false);
const selectTimeItem = ref<any>({ name: "全部" });
const selectStatusItem = ref<any>({ id: 1769, name: "全部", value: null });
const statusList = ref([
  { id: 1769, name: "全部", value: null },
  // { id: 1770, name: "待支付", value: 1 },
  { id: 1771, name: "已支付", value: 2 }
  // { id: 1772, name: "支付超时", value: 5 }
]);
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);
const tableData = ref<any[]>([]);
const selectTimeValue = ref(24002);
const selectStatusValue = ref(1769);
onActivated(() => {
  const query = route.query;
  if (query.status === "2") {
    selectTimeItem.value = { name: "全部" };
    selectStatusItem.value = { name: "已支付", value: 2 };
  }
  getList();
});
function getList() {
  const params: any = {
    product_type: 0,
    page: page.value,
    page_size: pageSize.value
  };
  if (selectTimeItem.value.begin_date) {
    params.begin_date = selectTimeItem.value.begin_date;
    params.end_date = selectTimeItem.value.end_date;
  }
  if (selectStatusItem.value.value) {
    params.status = selectStatusItem.value.value;
  } else {
    params.status_array = "2,6";
  }
  listLoading.value = true;
  orderListApi(params)
    .then((res) => {
      const data = res.data || {};
      tableData.value = (data.list || []).map((it: any) => {
        it.created_at = parseTime(it.created_at, "{y}-{m}-{d} {h}:{i}");
        it.statusText = statusFilter(it.status);
        return it;
      });
      total.value = data.count;
    })
    .finally(() => {
      listLoading.value = false;
    });
}
function handleTimeZbId(zbId: number) {
  selectTimeItem.value = timeList.value.find((i: { zbId: number }) => i.zbId === zbId);
  page.value = 1;
  getList();
}
function handleStatusId(id: number) {
  selectStatusItem.value = statusList.value.find((i) => i.id === id);
  page.value = 1;
  getList();
}
function statusFilter(val:number) {
  const arr = [
    "",
    "待支付",
    "已支付",
    "支付失败",
    "已取消",
    "支付超时",
    "已退款"
  ];
  return arr[val];
}
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  padding: 0 14px;
  border-radius: 6px;
}
:deep(.el-input.is-focus .el-input__wrapper),
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}

:deep(.el-table__cell .cell) {
  color: var(--el-text-color-primary);
}
:deep(.el-table__empty-text) {
  margin-top: 30px;
}
</style>
